<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        span{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<div id="emp">
    <h1>员工职位修改</h1>
    <span>请输入你要修改的员工id:</span>
    <input type="text" v-model="id"><br>
    <span>请输入你要修改的员工职位:</span>
    <input type="text" v-model="post"><br>
    <span>请输入你要修改的员工工资:</span>
    <input type="text" v-model="salary"><br>
    <input type="button" value="修改" @click="empPut">
    <br>
    <h1>员工信息查询</h1>
    <span>请输入你要查询的员工名字:</span>
    <input type="text" v-model="name"><br>
    <input type="button" value="查询" @click="empGet">
    <ol>
        <h3 v-for="value in object">
            {{ value }}
        </h3>
    </ol>
</div>
<script>
    new Vue({
        'el':'#emp',
        data(){
            return{
                id:'',
                post:'',
                salary:'',
                name:'',
                url:'http://127.0.0.1:8000/',
                object: {
                    // '员工名字':this.result.ename,
                    // '员工职位':this.result.ipost,
                    // '员工薪资':this.result.isalary,
                    // '职位时间':this.result.itime
                }
            }
        },
        mounted(){

        },
        methods:{
            empPut(){
                let urlPut=this.url+"putEmp/"+this.id+'/'+this.post+'/'+this.salary;
                axios.put(urlPut).then(
                    r=>{
                        let result=r.data;
                        if(result===true){
                            console.log("修改成功")
                        }else {
                            console.log("修改失败")
                        }
                    }
                )
            },
            empGet(){
                let urlGet=this.url+"getEmpByName/"+this.name;
                axios.get(urlGet).then(
                    r=>{
                        this.object=r.data;
                        console.log(this.object)
                    }
                )
            }
        }
    })
</script>
</body>
</html>